﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="Keywords" content="超星数字图书馆"/>
    <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, user-scalable=0, width=device-width"/>
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true">
    <!-- 微软的老式浏览器 -->
    <meta name="MobileOptimized" content="320">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application">
    <title>燕山大学大数据移动展示墙</title>
    <link rel="stylesheet" href="css/reset.css"/>
    <link rel="stylesheet" href="css/animate.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
    <link rel="stylesheet" href="css/index.css"/>
    <link rel="stylesheet" id="pageloader-css" href="css/pageloader.css" type="text/css" media="all"/>
</head>
<body>
<!--首页面加载动画 -->

<div class="wrap">
    <div class="swiper-container swiper-container-v">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="page_01 zero">
                    <div class="first_logo_box">
                        <div class="logo_outer_circle">
                            <div class="kp_qw"><img src="images/firstpage/outer_circle_new.png" alt=""/></div>
                        </div>
                        <div class="logo_mid_circle">
                            <div class="kp_qn"><img src="images/firstpage/mid_circle_new.png" alt=""/></div>
                        </div>
                        <div class="logo_inner_circle">
                            <div class="kp_qw"><img src="images/firstpage/inner_circle_new.png" alt=""/></div>
                        </div>
                        <div class="logo_all_box">
                            <div class="logo_self">
                                <img src="images/firstpage/logo_new.png" alt=""/>
                            </div>
                            <div class="logo_txt">
                                <img src="images/firstpage/logo_txt_new.png" alt=""/>
                            </div>

                        </div>
                    </div>
                    <div class="first_des">
                        <p>大数据移动展示墙</p>
                    </div>
                    <div class="count_time">
                        <span>统计时间：</span>
                        <span id="kp_clock"></span>
                    </div>
                    <div class="open ani">开启旅程</div>
                    <div class="go"><img src="images/go.png" class="ani" swiper-animate-effect="fadeInDown"
                                         swiper-animate-duration="0.5s" swiper-animate-delay="1s"></div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="page_01 one">
                    <div class="top ycenterbox">
                        <img src="images/rank_icon.png" alt=""/>
                        <h3>借阅排行</h3>
                    </div>
                    <div class="rank1">
                        <div class="book_img1">
                            <img src="images/rank/1.png" alt=""/>
                        </div>
                        <div class="book_rank">
                            <p>TOP.</p>
                            <span>1</span>
                        </div>
                        <div class="book_des">
                            <p>百年孤独</p>
                            <p><span>作者：</span><span>加西亚·马尔克斯著</span></p>
                        </div>
                    </div>
                    <div class="rank2">
                        <div class="book_img2">
                            <img src="images/rank/2.jpg" alt=""/>
                        </div>
                        <div class="book_rank">
                            <p>TOP.</p>
                            <span>2</span>
                        </div>
                        <div class="book_des" style="padding-left: 4px;">
                            <p>时间简史:插图本</p>
                            <p><span>作者：</span><span>史蒂芬·霍金</span></p>
                        </div>
                    </div>
                    <div class="rank3">
                        <div class="book_img3">
                            <img src="images/rank/3.png" alt=""/>
                        </div>
                        <div class="book_rank">
                            <p>TOP.</p>
                            <span>3</span>
                        </div>
                        <div class="book_des">
                            <p>丰乳肥臀</p>
                            <p><span>作者：</span><span>莫言</span></p>
                        </div>
                    </div>
                    <div class="bottom_rank">
                        <ul>
                            <li class="clearfix ani bounceOutDown animated" swiper-animate-effect="fadeInUp"
                                swiper-animate-duration="0.5s" swiper-animate-delay="1s" swiper-animate-style-cache=" "
                                style="visibility: visible;animation-duration:0.5s;-webkit-animation-duration:0.5s;animation-delay:1s;-webkit-animation-delay:1s;">
                                <span>TOP.</span>
                                <span>4</span>
                                <span>许三观卖血记.第3版</span>
                            </li>
                            <li class="clearfix ani bounceOutDown animated" swiper-animate-effect="fadeInUp"
                                swiper-animate-duration="0.5s" swiper-animate-delay="1.5s" swiper-animate-style-cache=" "
                                style="visibility: visible;animation-duration:0.5s;-webkit-animation-duration:0.5s;animation-delay:1.5s;-webkit-animation-delay:1.5s;">
                                <span>TOP.</span>
                                <span>5</span>
                                <span>活着.第3版</span>
                            </li>
                            <li class="clearfix ani bounceOutDown animated" swiper-animate-effect="fadeInUp"
                                swiper-animate-duration="0.5s" swiper-animate-delay="2s" swiper-animate-style-cache=" "
                                style="visibility: visible;animation-duration:0.5s;-webkit-animation-duration:0.5s;animation-delay:2s;-webkit-animation-delay:2s;">
                                <span>TOP.</span>
                                <span>6</span>
                                <span class="word">蛙</span>
                            </li>
                            <li class="clearfix ani bounceOutDown animated" swiper-animate-effect="fadeInUp"
                                swiper-animate-duration="0.5s" swiper-animate-delay="2.5s" swiper-animate-style-cache=" "
                                style="visibility: visible;animation-duration:0.5s;-webkit-animation-duration:0.5s;animation-delay:2.5s;-webkit-animation-delay:2.5s;">
                                <span>TOP.</span>
                                <span>7</span>
                                <span>看见</span>
                            </li>
                            <li class="clearfix ani bounceOutDown animated" swiper-animate-effect="fadeInUp"
                                swiper-animate-duration="0.5s" swiper-animate-delay="3s" swiper-animate-style-cache=" "
                                style="visibility: visible;animation-duration:0.5s;-webkit-animation-duration:0.5s;animation-delay:3s;-webkit-animation-delay:3s;">
                                <span>TOP.</span>
                                <span>8</span>
                                <span>边城</span>
                            </li>
                        </ul>
                    </div>
                    <div class="go"><img src="images/go.png" class="ani" swiper-animate-effect="fadeInDown"
                                         swiper-animate-duration="0.5s" swiper-animate-delay="1s"></div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="page_01 two">
                    <div class="top ycenterbox">
                        <img src="images/borrow_icon.png" alt=""/>
                        <h3>借还书系统</h3>
                    </div>
                    <div class="borders">
                        <svg class="outer_q" xmlns="http://www.w3.org/2000/svg">
                            <rect class="outer_rect" height="100%" width="100%" />
                        </svg>
                        <svg class="inner_q" xmlns="http://www.w3.org/2000/svg">
                            <rect class="inner_rect" height="100%" width="100%" />
                        </svg>
                        <div class="total_borrow">
                            <p>累计借阅</p>
                            <p class="btotal_num"></p>
                        </div>
                    </div>
                    <div class="bbox">
                        <div class="pub_img zs1"><img src="images/borrow/zs.png" alt=""/></div>
                        <div class="pub_img ys1"><img src="images/borrow/ys.png" alt=""/></div>
                        <div class="pub_img yx1"><img src="images/borrow/yx.png" alt=""/></div>
                        <div class="pub_img zx1"><img src="images/borrow/zx.png" alt=""/></div>
                        <div class="pub_img zs2"><img src="images/borrow/zs.png" alt=""/></div>
                        <div class="pub_img ys2"><img src="images/borrow/ys.png" alt=""/></div>
                        <div class="pub_img yx2"><img src="images/borrow/yx.png" alt=""/></div>
                        <div class="pub_img zx2"><img src="images/borrow/zx.png" alt=""/></div>
                        <ul class="borrow clearfix">
                            <li>
                                <div class="b_bg">
                                    <div class="b_title ani animated" swiper-animate-effect="fadeInUp"
                                         swiper-animate-duration="0.5s" swiper-animate-delay="1s" swiper-animate-style-cache=" "
                                         style="visibility: visible;animation-duration:0.5s;-webkit-animation-duration:0.5s;animation-delay:1s;-webkit-animation-delay:1s;">今日借阅</div>
                                    <div class="b_num ani animated" swiper-animate-effect="fadeInUp"
                                         swiper-animate-duration="0.5s" swiper-animate-delay="1.5s" swiper-animate-style-cache=" "
                                         style="visibility: visible;animation-duration:0.5s;-webkit-animation-duration:0.5s;animation-delay:1.5s;-webkit-animation-delay:1.5s;">
                                        <span class="today_num"></span>
                                        <span>册</span>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="b_bg">
                                    <div class="b_title ani animated" swiper-animate-effect="fadeInUp"
                                         swiper-animate-duration="0.5s" swiper-animate-delay="1s" swiper-animate-style-cache=" "
                                         style="visibility: visible;animation-duration:0.5s;-webkit-animation-duration:0.5s;animation-delay:1s;-webkit-animation-delay:1s;">本周借阅</div>
                                    <div class="b_num ani animated" swiper-animate-effect="fadeInUp"
                                         swiper-animate-duration="0.5s" swiper-animate-delay="1.5s" swiper-animate-style-cache=" "
                                         style="visibility: visible;animation-duration:0.5s;-webkit-animation-duration:0.5s;animation-delay:1.5s;-webkit-animation-delay:1.5s;">
                                        <span class="week_num"></span>
                                        <span>册</span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="page6-wrap ani fadeIn animated" id="main3"
                         style="margin:auto;width: 90%;height: 45%;" swiper-animate-effect="fadeIn"
                         swiper-animate-duration="1s" swiper-animate-delay="2s">
                    </div>
                    <div class="go"><img src="images/go.png" class="ani" swiper-animate-effect="fadeInDown"
                                         swiper-animate-duration="0.5s" swiper-animate-delay="1s"></div>

                </div>
            </div>
            <div class="swiper-slide">
                <div class="page_01 three">
                    <div class="top ycenterbox">
                        <img src="images/dg_icon.png" alt=""/>
                        <h3>到馆统计</h3>
                    </div>
                    <div class="comeTopBorder">
                        <div id="one">
                            <img src="images/count/style_img.png" alt="" class="ani fadeInUp animated" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="1s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:1s;-webkit-animation-duration:1s;animation-delay:1s;-webkit-animation-delay:1s;"/>
                        </div>
                        <div id="two" class="buttonBox">
                            <button class="button1"></button>
                            <div class="border"></div>
                            <div class="border"></div>
                            <div class="border"></div>
                            <div class="border"></div>
                        </div>
                        <div id="third" class="buttonBox">
                            <button class="button2"></button>
                            <div class="border"></div>
                            <div class="border"></div>
                            <div class="border"></div>
                            <div class="border"></div>
                        </div>
                    </div>
                    <div class="pernum ani clearfix" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s"
                         swiper-animate-delay="1s">
                        <div class="numone">
                            <div class="count1 co"></div>
                            <div class="bar1 bar"></div>
                        </div>
                        <div class="numtwo">
                            <div class="count2 co"></div>
                            <div class="bar2 bar"></div>
                        </div>
                        <div class="numthree">
                            <div class="count3 co"></div>
                            <div class="bar3 bar"></div>
                        </div>
                    </div>
                    <div class="des ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s"
                         swiper-animate-delay="1s">
                        <div class="title1">今日到馆</div>
                        <div class="title2">当前在馆</div>
                        <div class="title3">本周到馆</div>
                    </div>
                    <div class="totalPer ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="1.5s"
                         swiper-animate-delay="1s">
                        <p>累计到馆（从2017年6月1日开始）</p>

                        <div class="box">
                            <div class="rectangle_bg">
                                <div id='rectangle' class="rectangle"></div>
                            </div>

                        </div>
                    </div>
                    <div class="go"><img src="images/go.png" class="ani" swiper-animate-effect="fadeInDown"
                                         swiper-animate-duration="0.5s" swiper-animate-delay="1.6s"></div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="page_01 four">
                    <div class="top ycenterbox">
                        <img src="images/rec_icon.png" alt=""/>
                        <h3>今日推荐</h3>
                    </div>
                    <div class="swiper-container swiper-container-h" id="mybanner">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" id="bannerone">
                                <div class="banner_bg1">
                                    <div>
                                        <img src="images/recommend/bo.jpg" alt="" class="ani"
                                             swiper-animate-effect="zoomIn" swiper-animate-duration="0.8s"
                                             swiper-animate-delay="0s"/>
                                        <img src="images/recommend/bo1.jpg" alt="" class="ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="1.5s" swiper-animate-delay="0.8s"/>

                                    </div>
                                    <!--<div class="bg_pic"><img src="images/recommend/66.png" alt=""/></div>-->

                                    <p class="banner_p ani" swiper-animate-effect="flipInY"
                                       swiper-animate-duration="0.5s" swiper-animate-delay="1s">勃朗宁夫人十四行诗集</p>

                                </div>
                                <div class="banner_des ani" swiper-animate-effect="flipInY"
                                     swiper-animate-duration="0.5s" swiper-animate-delay="1.5s">
                                    <span>当前已有</span>
                                    <span class="num_bg">256人</span>
                                    <span>参与阅读</span>
                                </div>
                                <div class="go"><img src="images/go.png" class="ani" swiper-animate-effect="fadeInDown"
                                                     swiper-animate-duration="0.5s" swiper-animate-delay="1.6s"></div>

                            </div>
                            <div class="swiper-slide">
                                <div class="banner_bg1">
                                    <!--<img src="images/recommend/25.jpg" alt="" class="bg_pic"-->
                                         <!--swiper-animate-effect="bounceInDown" swiper-animate-duration="0.8s"-->
                                         <!--swiper-animate-delay="0s"/>-->
                                    <div>
                                        <img src="images/recommend/zhi.jpg" alt="" class="ani"
                                             swiper-animate-effect="zoomIn" swiper-animate-duration="0.8s"
                                             swiper-animate-delay="0s"/>
                                        <img src="images/recommend/zhi1.jpg" alt="" class="ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="1.5s" swiper-animate-delay="0s"/>

                                    </div>


                                    <p class="banner_p" swiper-animate-effect="flipInY" swiper-animate-duration="0.5s"
                                       swiper-animate-delay="1s">智慧书</p>

                                </div>
                                <div class="banner_des" swiper-animate-effect="flipInY" swiper-animate-duration="0.5s"
                                     swiper-animate-delay="1.5s">
                                    <span>当前已有</span>
                                    <span class="num_bg">208人</span>
                                    <span>参与阅读</span>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="banner_bg1">
                                    <!--<img src="images/recommend/24.jpg" alt="" class="bg_pic"-->
                                         <!--swiper-animate-effect="bounceInDown" swiper-animate-duration="0.8s"-->
                                         <!--swiper-animate-delay="0s"/>-->
                                    <div>
                                        <img src="images/recommend/jing.jpg" alt="" class="ani"
                                             swiper-animate-effect="zoomIn" swiper-animate-duration="0.8s"
                                             swiper-animate-delay="0s"/>
                                        <img src="images/recommend/jing1.jpg" alt="" class="ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="1.5s" swiper-animate-delay="0s"/>

                                    </div>


                                    <p class="banner_p" swiper-animate-effect="flipInY" swiper-animate-duration="0.5s"
                                       swiper-animate-delay="1s">经营战略全史</p>

                                </div>
                                <div class="banner_des" swiper-animate-effect="flipInY" swiper-animate-duration="0.5s"
                                     swiper-animate-delay="1.5s">
                                    <span>当前已有</span>
                                    <span class="num_bg">198人</span>
                                    <span>参与阅读</span>
                                </div>
                            </div>


                        </div>
                        <div class="mypagination">
                            <span class="currentpage"></span>/<span class="totalpage"></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-slide kpnoslide">
                <div class="page_01 five">
                    <div class="top ycenterbox">
                        <img src="images/notice_icon.png" alt=""/>
                        <h3>通知</h3>
                    </div>
                    <div class="notice_con notice_box">
                        <div class="other">
                            <ul class="clearfix" id="notice">
                                <li class="clearfix odd ani" swiper-animate-effect="fadeInDown"
                                    swiper-animate-duration="0.8s" swiper-animate-delay="0s">
                                    <span class="notice_date">6.26</span>
                                    <span class="contact_icon">
                                        <div class="longline ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s"
                                                                         swiper-animate-delay="3.2s"></div>
                                    </span>

                                    <div class="contact_line">
                                        <p>10:00am</p>
                                        <span></span>

                                    </div>
                                    <div class="conbtn notice_con">
                                        <span class="new_icon"></span>

                                        <h3>燕山大学图书馆</h3>

                                        <p>燕山大学图书馆前身为东北重型机械学院图书馆</p>
                                    </div>
                                </li>
                                <li class="clearfix even ani" swiper-animate-effect="fadeInDown"
                                    swiper-animate-duration="0.8s" swiper-animate-delay="0.6s">
                                    <span class="notice_date">6.27</span>
                                    <span class="contact_icon"></span>

                                    <div class="contact_line">
                                        <p>3:00pm</p>
                                        <span></span>

                                    </div>
                                    <div class="notice_con">
                                        <span class="new_icon"></span>

                                        <h3>图书馆提升服务质量</h3>

                                        <p> 图书馆为提升服务质量，邀请作家郭敬明来馆讲座，请读者届时参加。时间：下午三点。</p>
                                    </div>
                                </li>
                                <li class="clearfix odd ani" swiper-animate-effect="fadeInDown"
                                    swiper-animate-duration="0.8s" swiper-animate-delay="1s">
                                    <span class="notice_date">6.28</span>
                                    <span class="contact_icon"></span>

                                    <div class="contact_line">
                                        <p>11:00am</p>
                                        <span></span>

                                    </div>
                                    <div class="notice_con">
                                        <span class="new_icon"></span>

                                        <h3>图书馆改造升级</h3>

                                        <p>图书馆经过春节前后的改造升级，图书馆将以崭新的面貌迎接读者的到来，为了创造一个美好，温馨的借阅环境，现将开馆通知安排如下：</p>
                                    </div>
                                </li>
                                <li class="clearfix even ani" swiper-animate-effect="fadeInDown"
                                    swiper-animate-duration="0.8s" swiper-animate-delay="1.6s">
                                    <span class="notice_date">6.29</span>
                                    <span class="contact_icon"></span>

                                    <div class="contact_line">
                                        <p>8:00am</p>
                                        <span></span>

                                    </div>
                                    <div class="notice_con">
                                        <span class="new_icon"></span>

                                        <h3>开放歌德电子书借阅机</h3>

                                        <p>图书馆新开放四台歌德电子书借阅机，方便读者查阅资料，看书。敬请使用</p>
                                    </div>
                                </li>
                                <li class="clearfix odd ani" swiper-animate-effect="fadeInDown"
                                    swiper-animate-duration="0.8s" swiper-animate-delay="1.8s">
                                    <span class="notice_date">7.02</span>
                                    <span class="contact_icon"></span>

                                    <div class="contact_line">
                                        <p>4:00pm</p>
                                        <span></span>

                                    </div>
                                    <div class="notice_con">
                                        <span class="new_icon"></span>

                                        <h3>邀请作家韩寒来馆讲座</h3>

                                        <p>图书馆为提升服务质量，邀请作家韩寒来馆讲座，请读者届时参加。时间:下午三点</p>
                                    </div>
                                </li>
                                <li class="clearfix even ani" swiper-animate-effect="fadeInDown"
                                    swiper-animate-duration="0.8s" swiper-animate-delay="3s">
                                    <span class="notice_date">7.03</span>
                                    <span class="contact_icon"></span>

                                    <div class="contact_line">
                                        <p>10:00am</p>
                                        <span></span>

                                    </div>
                                    <div class="notice_con">
                                        <span class="new_icon"></span>

                                        <h3>元旦节日放假</h3>

                                        <p>元旦节日放假，图书馆工作人员将休息一天，请读者合理安排借阅时间。</p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="go"><img src="images/go.png" class="ani" swiper-animate-effect="fadeInDown"
                                         swiper-animate-duration="0.5s" swiper-animate-delay="1.6s"></div>
                    <div class="page_01 noticelist laylist">
                        <div class="top ycenterbox">
                            <span class="back1 backnotice"></span>
                            <!--<img src="images/rank_icon.png" alt=""/>-->
                            <h3>通知详情</h3>
                        </div>
                        <div class="list">
                            <div class="listitle">
                                燕山大学图书馆简介
                            </div>
                            <div class="listcon">
                                <div class="botline">
                                    <span>6月26日</span>
                                    <span>10:00am</span>

                                </div>
                                <div class="botpcon">
                                    <div>
                                        <p>燕山大学图书馆前身为东北重型机械学院图书馆，1997年正式更名为燕山大学图书馆。图书馆舍主体面积1.45万平方米，设有7部一室，分别为流通部、阅览部、采编部、科技查新与参考咨询部、信息技术部、CALIS资源管理部、情报数字化部和办公室。现有馆员70余人，其中具有大学以上学历人员80%以上，一批具有多学科专业知识的博硕士馆员工作在各个岗位。
                                                目前，图书馆主馆收藏有中外文图书100余万册，期刊2200余种；电子图书150万余种，网络数据库106个，自建“重型机械数字图书馆”等特色数据库7个；馆藏覆盖了我校所有学科，尤以重型机械及其相关专业文献收藏最具特色，形成了比较系统、完整的综合性的藏书体系和提供网络、电子、书刊、信息情报等资源的多方位的服务体系。
                                                燕山大学图书馆是河北省第一家获批教育部部级科技查新站的省属高校图书馆，同时还承担着中国高等教育文献保障系统(CALIS)河北省文献信息服务中心，河北省高等学校数字图书馆联盟管理中心，河北省高等学校图书馆数字化工作委员会，河北省高校精品课程网站等职责。 
                                                科学发展，文明服务是图书馆工作的永恒主题。在全体馆员的共同努力下，燕山大学图书馆屡获全国巾帼文明示范岗、华北地区先进图书馆、秦皇岛市优秀图书馆、燕山大学优秀单位等荣誉称号。 
                                                燕山大学图书馆正向着高水平现代化图书馆目标前进，将会以更丰富的资源、更优越的环境、更优质的服务面向我校师生和社会需求，为燕山大学的发展做出更大的贡献！</p>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="swiper-slide">
                <div class="page_01 star">
                    <div class="top ycenterbox">
                        <img src="images/read_icon.png" alt=""/>
                        <h3>昨日阅读之星</h3>
                    </div>
                    <div class="allstar">
                        <ul>
                            <li class="ani" swiper-animate-effect="rotateInUpRight" swiper-animate-duration="0.5s"
                                swiper-animate-delay="0s">
                                <div class="s_head">
                                    <img src="images/star/child.png" alt="" id="starhead"/>
                                </div>
                                <div class="s_rank">NO.1</div>
                                <p>刘亚杰</p>

                                <p>阅读：8小时58分</p>

                                <div class="p_bg">NO.1</div>
                            </li>
                            <li class="ani" swiper-animate-effect="rotateInUpLeft" swiper-animate-duration="0.5s"
                                swiper-animate-delay="0.5s">
                                <div class="s_head">
                                    <img src="images/star/child.png" alt=""/>
                                </div>
                                <div class="s_rank">NO.2</div>
                                <p>杨亚西</p>

                                <p>阅读：6小时08分</p>

                                <div class="p_bg">NO.2</div>
                            </li>
                            <li class="ani" swiper-animate-effect="rotateInUpRight" swiper-animate-duration="0.5s"
                                swiper-animate-delay="1s">
                                <div class="s_head">
                                    <img src="images/star/child.png" alt=""/>
                                </div>
                                <div class="s_rank">NO.3</div>
                                <p>韩林芳</p>

                                <p>阅读：4小时23分</p>

                                <div class="p_bg">NO.3</div>
                            </li>

                        </ul>
                    </div>

                    <div class="go"><img src="images/go.png" class="ani" swiper-animate-effect="fadeInDown"
                                         swiper-animate-duration="0.5s" swiper-animate-delay="1.6s"></div>

                </div>
            </div>
        </div>
    </div>
</div>

</body>
<script src="js/jquery-1.12.2.js"></script>
<script src="js/pageloader.js" type="text/javascript"></script><!--预加载动画svg-->
<script type="text/javascript" src="js/swiper.min.js"></script>
<script type="text/javascript" src="js/swiper.animate1.0.2.min.js"></script>
<script src="js/echart.js"></script>
<script src="js/iscroll.js"></script>
<script src="js/countUp.js"></script><!--借还书数字包-->
<script src="js/index.js"></script>

<!-- BEGIN PLACE LOADING ICON IN THE MIDDLE OF THE PAGE -->
<script>
    jQuery(window).resize(function () {
        resizenow();
    });
    function resizenow() {
        var browserwidth = jQuery(window).width();
        var browserheight = jQuery(window).height();
        jQuery('.bonfire-pageloader-icon').css('right', ((browserwidth - jQuery(".bonfire-pageloader-icon").width()) / 2)).css('top', ((browserheight - jQuery(".bonfire-pageloader-icon").height()) / 2));
        ///获取折线中的canvas标签，设置其大小随着窗口变化而变化,即随着main3的宽高变化而变化
        var canvas_width=$('#main3').width();
        var canvas_height=$('#main3').height();
        $('#main3>div').width(canvas_width);
        $('#main3>div').height(canvas_height);
        $('#main3>div>canvas').width(canvas_width);
        $('#main3>div>canvas').height(canvas_height);

    };
    resizenow();
</script>
</html>
